<template>
  <div class="setBgc">
    <div class="mi-checkout page-main">
      <div class="container">
        <div class="checkout-wrap">
          <div class="checkout-main">
            <div class="checkout-detail">
              <div class="detail-section address-detail">
                <div class="address-header">
                  <span class="header-title">收货地址</span>
                </div>
                <div class="address-list show-less-list">
                  <div
                    :class="item.bl"
                    @click="cli(index)"
                    v-for="(item, index) in addList"
                    :key="item.id"
                  >
                    <div class="address-info">
                      <div class="name">
                        {{ item.name }}
                      </div>
                      <div class="tel">
                        {{ item.phone }}
                      </div>
                      <div class="address-con">
                        <!-- <span>四川</span>
                        <span>成都市</span>
                        <span>简阳市</span>
                        <span>石盘镇</span> -->
                        <span class="info">
                          {{ item.address }}
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="setWth">
                    <el-button
                      class="address-item"
                      type="text"
                      @click="dialogFormVisible = true"
                    ></el-button>
                    <el-dialog
                      title="收货地址"
                      v-model="dialogFormVisible"
                      width="700px"
                    >
                      <el-form :model="form" inline="false">
                        <el-form-item
                          inline="true"
                          label="姓名"
                          :label-width="formLabelWidth"
                        >
                          <el-input
                            inline="false"
                            v-model="form.name"
                            autocomplete="off"
                          ></el-input>
                        </el-form-item>
                        <el-form-item
                          inline="false"
                          label="手机号"
                          :label-width="formLabelWidth"
                        >
                          <el-input
                            @change="dd"
                            v-model="form.phone"
                            autocomplete="off"
                          ></el-input>
                        </el-form-item>
                        <el-form-item 
                        label="请选择地区"
                        :label-width="formLabelWidth">
                          <div style="width: 190px ;">
                            <el-cascader
                            placeholder	="选择地区"
                              inline="false"
                              size="large"
                              :options="options"
                              v-model="selectedOptions"
                              @change="handleChange"
                            >
                            </el-cascader>
                          </div>
                        </el-form-item>
                        <el-form-item
                          label="输入详细地址"
                          :label-width="formLabelWidth"
                        >
                          <el-input
                            class="set"
                            v-model="form.address"
                            autocomplete="off"
                          ></el-input>
                        </el-form-item>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false"
                          >取 消</el-button
                        >
                        <el-button type="primary" @click="addAddress"
                          >确 定</el-button
                        >
                      </div>
                    </el-dialog>
                  </div>
                </div>
              </div>
              <div class="detail-section">
                <div class="detail-header">商品信息</div>
                <div
                  class="goods-list"
                  v-for="item in this.$store.state.finalList"
                  :key="item.id"
                >
                  <div class="good-item">
                    <div class="item-desc good-img">
                      <img :src="item.img" />
                    </div>
                    <div class="item-desc good-name">
                      <a href="javascript:void(0);">
                        <span>{{ item.title }}</span>
                      </a>
                    </div>
                    <div class="item-desc price-box">
                      <div class="item-desc good-price">
                        {{ item.unitPrice }}元 x {{ item.value }}
                      </div>
                      <div class="item-desc good-status"></div>
                      <div class="item-desc good-total">
                        {{ (a = item.price) }}元
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="detail-section">
                <div class="section-options section-shipment">
                  <div class="options-desc options-header">
                    <div class="title">配送方式</div>
                  </div>
                  <div class="options-desc options-body">
                    <div class="options-list">
                      <div class="options-item selected">送货上门</div>
                    </div>
                  </div>
                </div>
                <div class="section-options section-invoice">
                  <div class="options-desc options-header">
                    <div class="title">发票</div>
                  </div>
                  <div class="options-desc options-body">
                    <div class="options-list">
                      <div class="options-item selected">电子普通发票</div>
                      <div class="options-item selected">个人</div>
                      <div class="options-item selected">商品明细</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="detail-section count-detail">
                <div class="section-bill">
                  <div class="bill-item">
                    <div class="bill-name">商品件数：</div>
                    <div class="bill-money">{{ this.final.count }}件</div>
                  </div>
                  <div class="bill-item">
                    <div class="bill-name">商品总价：</div>
                    <div class="bill-money">{{ this.allPrice }}元</div>
                  </div>
                  <div class="bill-item">
                    <div class="bill-name">运费：</div>
                    <div class="bill-money">0元</div>
                  </div>
                  <div class="bill-item total-price">
                    <div class="bill-name">应付总额：</div>
                    <div class="bill-money">
                      <em> {{ this.allPrice }} </em>
                      元
                    </div>
                  </div>
                </div>
              </div>
              <div class="detail-section footer-detail clearfix">
                <div class="handle-action">
                  <div class="operating-button">
                    <a
                      href="javascript:void(0);"
                      class="btn btn-primary"
                      v-loading.fullscreen.lock="fullscreenLoading"
                      type="primary"
                      @click="openFullScreen1"
                      :plain="true"
                      >去结算</a
                    >
                    <a
                      href="javascript:void(0);"
                      @click="toCart"
                      class="btn btn-return"
                      >返回购物车</a
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { and } from '@vueuse/core';
import { nanoid } from "nanoid";
import { ElMessage } from "element-plus";
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
export default {
  name: "mmain",
  data() {
    return {
      a:'',
      addFrom: {},
      options: regionData,
      selectedOptions: [],
      fullscreenLoading: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      a: 0,
      allPrice: 0,
      shopList: this.$store.state.finalList,
      addList: [],
      final: {
        count: 0,
      },
      form: {
        address: "",
        phone: null,
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },

  methods: {
    openFullScreen1() {
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.fullscreenLoading = false;
        let sum = 0;
        if (this.addList.length != 0) {
          for (let i in this.addList) {
            if (this.addList[i].bl == "address-item fansile active") {
              sum++;
            }
          }
          if (sum == 0) {
            console.log(this.addList);
            ElMessage({
              message: "请选择地址",
              type: "error",
            });
          } else {
            ElMessage({
              message: "提交成功",
              type: "success",
            });
            setTimeout(() => {
              this.fullscreenLoading = true;
              setTimeout(() => {
                this.fullscreenLoading = false;
                this.$router.push("index");
              }, 1000);
            }, 2000);
          }
        } else {
          ElMessage({
            message: "请添加地址",
            type: "error",
          });
        }
      }, 2000);
    },
    toCart() {
      this.$router.push("cart");
    },
    peice() {
      for (let i in this.$store.state.finalList) {
        this.final.count =
          this.$store.state.finalList[i].value + this.final.count;
      }
    },
    addAddress() {
      this.dialogFormVisible = false;
      if (
        this.form.name != "" &&
        this.form.phone != "" &&
        this.form.address != ""
      ) {
        ElMessage({
          message: "添加成功！",
          type: "success",
        });
        this.addList.unshift({
          id: nanoid(),
          name: this.form.name,
          phone: this.form.phone,
          address: this.form.address,
          bl: "address-item fansile",
        });
      }else{
        ElMessage({
          message: "请输入所有信息！",
          type: "error",
        });
        return
      }
      localStorage.setItem("address", JSON.stringify(this.addList));
    },
    cli(index) {
      this.addList[index].bl = "address-item fansile active";
    },
    dd() {
      let phonereg = /^1[3-9][0-9]{9}$/;
      if (phonereg.test(this.form.phone) != true) {
        ElMessage({
          message: "请输入正确的手机号！",
          type: "error",
        });
        this.form.phone = "";
        return;
      }
    },
    //获取地区
    projectInfo() {
      var that = this;
      getProjectInfo({ token: getToken(), id: that.id })
        .then((res) => {
          this.addForm = {
            id: res.id,
            // 基础信息
            p_name: res.p_name, //项目名
            p_message: res.p_message, //项目信息
            area: res.area, //地区
            remark: res.remark, //备注
          };
          this.selectedOptions =
            TextToCode[this.addForm.area.split("/")[0]][
              this.addForm.area.split("/")[1]
            ][this.addForm.area.split("/")[2]].code;
        })
        .catch((err) => {
          Message.error(err);
        });
    },
    handleChange(value) {
      console.log(value);
      this.getCodeToText(null, value);
    },
    getCodeToText(codeStr, codeArray) {
      if (null === codeStr && null === codeArray) {
        return null;
      } else if (null === codeArray) {
        codeArray = codeStr.split(",");
      }
      var area = "";
      switch (codeArray.length) {
        case 1:
          area += CodeToText[codeArray[0]];
          break;
        case 2:
          area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
          break;
        case 3:
          area +=
            CodeToText[codeArray[0]] +
            " " +
            CodeToText[codeArray[1]] +
            " " +
            CodeToText[codeArray[2]] + " ";
          break;
        default:
          break;
      }
      console.log(area);
      // this.addForm.area = area
      this.form.address = area
      return area;
    },
  },
  mounted() {
    let a = JSON.parse(localStorage.getItem("address"));
    for (let i in a) {
      this.addList.unshift(a[i]);
    }
    this.peice();
    for (let i in this.shopList) {
      this.allPrice = this.shopList[i].price + this.allPrice;
    }
  },
};
</script>

<style scoped>
/* .setA{
  display: block !important;
  margin-left: 20px !important;
} */

.set {
  width: 500px;
}
.setBgc {
  text-align: left;
}
.page-main {
  background: #f5f5f5;
  padding: 40px 0 60px;
}
.container {
  width: 1226px;
  margin: 0 auto;
  background: #fff;
}
.checkout-detail {
  position: relative;
  padding: 48px 0 0;
}
.detail-section {
  position: relative;
  padding: 0 24px;
}
.address-header {
  margin: 0 0 20px;
}
.header-title {
  color: #333;
  font-size: 18px;
  line-height: 20px;
}
.address-item {
  background: url("@/assets/images/bag.png") no-repeat center;
  display: inline-block;
  width: 268px;
  height: 178px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  position: relative;
  margin-right: 17px;
  margin-bottom: 20px;
  vertical-align: top;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.address-item:hover {
  background: url("@/assets/images/hover.png") no-repeat center;
  border: #b0b0b0 solid 1px;
}
img {
  border: 0;
}
.dialog-footer {
  text-align: right;
}
.detail-header {
  color: #333;
  font-size: 18px;
  line-height: 40px;
}
.goods-list {
  padding: 5px 0;
  border-bottom: 1px solid #e0e0e0;
}
.goods-list .good-item {
  position: relative;
  padding: 15px 0;
  font-size: 14px;
}
.good-item .good-img {
  width: 30px;
  height: 30px;
  margin: 0 10px 0 0;
}
.good-item .item-desc {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
  color: #424242;
  vertical-align: middle;
}
.good-item .good-name {
  width: 650px;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
.good-img img {
  width: 100%;
  height: 100%;
}
.good-item .good-name a {
  color: #424242;
}
.good-item .good-price {
  width: 150px;
  text-align: center;
}
.good-item .good-status {
  width: 100px;
  text-align: center;
}
.good-item .good-total {
  width: 190px;
  text-align: right;
  color: #ff6701;
}
.section-options {
  padding: 25px 0;
  border-bottom: 1px solid #e0e0e0;
}
.options-header {
  width: 150px;
}
.options-desc {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.options-header .title {
  color: #333;
  font-size: 18px;
  line-height: 38px;
}
.options-list {
  width: 960px;
}
.options-list .selected {
  border-color: #fff;
  color: #ff6700;
  font-size: 14px;
}
.options-list .options-item {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  margin-right: 14px;
  border: 1px solid #fff;
}
.section-options:last-child {
  border: none;
}
.count-detail {
  position: relative;
  min-height: 200px;
  padding: 20px 0;
  margin: 0 48px;
}
.section-bill {
  position: absolute;
  right: 0;
  bottom: 20px;
  font-size: 14px;
}
.section-bill .bill-item {
  position: relative;
  padding-left: 126px;
  line-height: 2;
  text-align: right;
}
.section-bill .bill-name {
  position: absolute;
  top: 0;
  left: 0;
  width: 126px;
  white-space: nowrap;
  color: #757575;
}
.bill-money {
  color: #ff6700;
}
.total-price {
  margin: 10px 0 0;
}
.bill-money em {
  font-style: normal;
  font-size: 30px;
  line-height: 1;
}
.footer-detail {
  padding: 20px 48px;
  border-top: 2px solid #f5f5f5;
  overflow: hidden;
}
.handle-action {
  float: right;
}
.btn {
  display: inline-block;
  width: 158px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid #b0b0b0;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  color: #b0b0b0;
  cursor: pointer;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.handle-action .btn {
  float: right;
  margin-left: 30px;
  vertical-align: top;
}
.btn-primary {
  background: #ff6700;
  border-color: #ff6700;
  color: #fff;
}
.handle-action .btn-primary:hover {
  background: #f25807;
}
.fansile {
  background: none;
  float: left;
}
.active {
  border: #ff6700 solid 1px !important;
}
.fansile:hover {
  background: none;
}
.address-info {
  line-height: 22px;
  color: #757575;
  padding: 15px 24px 0;
}
.address-info {
  font-size: 14px;
}
.name {
  font-size: 18px;
  color: #333;
  line-height: 30px;
  margin-bottom: 10px;
}
.address-con span {
  display: inline-block;
  margin-right: 3px;
  word-wrap: break-word;
}
.address-con .info {
  width: 100%;
}
</style>